/**
 * create ns if not already done
  */
var net = net || {};
net.andersand = net.andersand || {};
net.andersand.arcomage = net.andersand.arcomage || {};

/**
 * Anything visual or having to do with events goes here
 * @param options
 */
net.andersand.arcomage.GUI = function(options) {
    options = options || {};
    this.game = options.game; // required
    this.vargui = {}; // holds dynamic gui elements (number of bricks, towers, etc)
    var width = options.width || 800;
    var height = options.height || 650;
    var paper = new Raphael("gfx", width, height);
    var self = this;
    var config = self.game.config;

    /**
     * @param {net.andersand.arcomage.Card} oCard
     */
    this.showCard = function(oCard) {
        if (oCard.getRuleIndex() == 0) {
            paper.image(oCard.imageRef, 0, 0, 696, 456).attr({"clip-rect": "48,36,290,385" });
        }
        else {
            paper.image(oCard.imageRef, 0, 0, 696, 456).attr({"clip-rect": "360,36,290,385" });
        }
    };

    this.init = function() {
        // init background
        paper.rect(0,0,width, height).attr({"fill" : "#fff"});
        if (config.backgroundImage) {
            paper.image(config.imagePath + "other/" + config.backgroundImage, 0, 0, width, height);
        }
        for (var index in self.game.players) {
            var oPlayer = self.game.players[index];
            self.vargui[oPlayer.name] = {}; // init placeholder
            self.drawResourcesGUI(oPlayer);
            self.drawResources(oPlayer, true);
            self.drawTower(oPlayer);
            self.drawWall(oPlayer);
        }
    };

    this.drawResources = function(oPlayer, bInit) {
        var vargui = self.vargui[oPlayer.name];
        var bx = oPlayer.ai ? width-180 : 20;
        var group = paper.group(0, oPlayer.name + " resources");
        var qtext = "Quarry: " + oPlayer.quarry,
            btext = "Bricks: " + oPlayer.bricks,
            mtext = "Magic: " + oPlayer.magic,
            gtext = "Gems: " + oPlayer.gems,
            dtext = "Dungeon: " + oPlayer.dungeon,
            rtext = "Recruits: " + oPlayer.recruits;
        if (bInit) {
            vargui.quarry = paper.text(bx + 90, 40, qtext);
            vargui.quarry.attr({"text-anchor" : "start"});
            group.add(vargui.quarry);
            vargui.bricks = paper.text(bx + 90, 60, btext);
            vargui.bricks.attr({"text-anchor" : "start"});
            group.add(vargui.bricks);
            vargui.magic = paper.text(bx + 90, 120, mtext);
            vargui.magic.attr({"text-anchor" : "start"});
            group.add(vargui.magic);
            vargui.gems = paper.text(bx + 90, 140, gtext);
            vargui.gems.attr({"text-anchor" : "start"});
            group.add(vargui.gems);
            vargui.dungeon = paper.text(bx + 90, 200, dtext);
            vargui.dungeon.attr({"text-anchor" : "start"});
            group.add(vargui.dungeon);
            vargui.recruits = paper.text(bx + 90, 220, rtext);
            vargui.recruits.attr({"text-anchor" : "start"});
            group.add(vargui.recruits);
        }
        else {
            vargui.quarry.attr({text : qtext});
            vargui.bricks.attr({text : btext});
            vargui.magic.attr({text : mtext});
            vargui.gems.attr({text : gtext});
            vargui.dungeon.attr({text : dtext});
            vargui.recruits.attr({text : rtext});
        }
    };

    this.drawResourcesGUI = function(oPlayer) {
        // draw resource box
        var bx = oPlayer.ai ? width-180 : 20;
        var group = paper.group(0, oPlayer.name + " resources-gui");
        var box = paper.rect(bx, 20, 160, 245, 10);
        box.attr({fill : "#fff"});
        group.add(box);
        // quarry: draw box and image of bricks
        group.add(paper.rect(bx + 5, 25, 75, 75, 5).attr({"fill" : "#f77"}));
        group.add(paper.image(config.imagePath + "other/bricks.png", bx+5, 25, 75, 75));
        // magic: draw box and image of gems
        group.add(paper.rect(bx + 5, 105, 75, 75, 5).attr({"fill" : "#adf"}));
        group.add(paper.image(config.imagePath + "other/gem.png", bx+5, 105, 75, 75));
        // dungeon: draw box and image of recruits
        group.add(paper.rect(bx + 5, 185, 75, 75, 5).attr({"fill" : "#7a7"}));
        group.add(paper.image(config.imagePath + "other/recruits.png", bx+5, 185, 75, 75));
    };

    /**
     * todo Make sure not to calculate all this every time the tower grows or shrinks
     * todo 100+ lines; refactor?
     * @param oPlayer
     */
    this.drawTower = function(oPlayer) {
        var x = oPlayer.ai ? width-50 : 20;
        var towerSectionHeight = config.gfx.towerSectionHeight;
        var towerSectionBuffer = config.gfx.towerSectionHeight + 1;
        var colorGray = {"fill" : "#ddd"};
        var group = paper.group(0, oPlayer.name + " tower");
        // draw tower sections
        for (var i=1; i<=oPlayer.tower; i++) {
            var y = height-i*towerSectionBuffer;
            if (i%10 == 0) {
                // double section "archery station"
                y -= towerSectionBuffer;
                group.add(paper.rect(x,y,30,towerSectionHeight*2+1,1).attr(colorGray));
                var ax1 = x+10,
                    ax2 = x+20,
                    ay1 = y+2,
                    ay2 = y+towerSectionHeight*2-2;
                group.add(paper.path("M" + ax1 + " " + ay1 +
                         "L" + ax1 + " " + ay2 +
                         "M" + ax2 + " " + ay1 +
                         "L" + ax2 + " " + ay2 ).attr({"stroke-width" : 3}));
                i++;
            }
            else {
                group.add(paper.rect(x,y,30,towerSectionHeight,1).attr(colorGray));
                var sxa;
                // normally draw lines to look like bricks
                if (i%2 == 0) {
                    sxa = [5,15,25];
                }
                else {
                    sxa = [10,20];
                }
                // <3
                for (var sx in sxa) {
                    group.add(paper.path("M" + (sxa[sx]+x) + " " + y +
                             "L" + (sxa[sx]+x) + " " + (y+towerSectionHeight)));
                }
            }
        }
        // draw tower base (on top of tower, for simplicity) : base is 4 sections high
        var towerbase = paper.rect(x, height-towerSectionBuffer*4, 30, towerSectionHeight*4+3, 2)
                           .attr(colorGray);
        group.add(towerbase);
        // do the door
        var dx1 = x+10,
            dx2 = x+12,
            dx3 = x+18,
            dx4 = x+20,
            dx5 = x+15;
        //noinspection UnnecessaryLocalVariableJS
        var dy1 = height,
            dy2 = height-towerSectionHeight*2,
            dy3 = height-towerSectionHeight*3;
        var playerColor = { "fill" : (oPlayer.ai ? "#aaa" : "#f60") };
        var door = paper.path(
                "M" + dx1 + " " + dy1 +
                "L" + dx1 + " " + dy2 +
                "L" + dx2 + " " + dy3 +
                "L" + dx3 + " " + dy3 +
                "L" + dx4 + " " + dy2 +
                "L" + dx4 + " " + dy1 +
                "L" + dx1 + " " + dy1 +
                "M" + dx5 + " " + dy3 +
                "L" + dx5 + " " + dy1 ).attr(playerColor);
        group.add(door);
        // > 4 draw roof if tower is big enough to hold it up haha
        if (oPlayer.tower > 4) {
            var rx1 = x-4,
                ry1 = height-oPlayer.tower*towerSectionBuffer;
            // draw roof base
            group.add(paper.rect(x-4, ry1, 38, towerSectionHeight, 2).attr(colorGray));
            var rx2 = x+15,
                    rx3 = x+34,
                    ry2 = ry1-38;
            // draw roof triangle
            group.add(paper.path(
                "M" + rx1 + " " + ry1 +
                "L" + rx2 + " " + ry2 +
                "L" + rx3 + " " + ry1 +
                "L" + rx1 + " " + ry1 ).attr(playerColor));
        }
        else {
            // < 5 lost the roof (..not drawing roof)
            // < 4 draw tower base cracks
            if (oPlayer.tower < 4) {
                var cracks = paper.path(
                        "M" + dx1 +       " " + dy2 +
                        "L" + (dx1 - 5) + " " + dy3 +
                        "L" + (dx1 - 5) + " " + (height - towerSectionBuffer * 4) +
                        "M" + dx3 +       " " + dy3 +
                        "L" + (dx4 + 3) + " " + dy3 +
                        "L" + (dx4 + 5) + " " + dy2
                        );
                group.add(cracks);
            }
            // < 3 draw missing door if almost dead
            if (oPlayer.tower < 3) {
                door.attr({ "fill" : "#000" });
            }
            // < 2 remove tower base completely
            if (oPlayer.tower < 2) {
                towerbase.remove();
                door.remove();
                cracks.remove();
            }
        }

    };

    this.drawWall = function(oPlayer) {
        var x = oPlayer.ai ? width-84 : 64;
        var wallSectionHeight = config.gfx.wallSectionHeight;
        var wallSectionBuffer = config.gfx.wallSectionHeight + 1;
        var group = paper.group(0, oPlayer.name + " wall");
        for (var i=0; i<=oPlayer.wall; i++) {
            group.add(paper.rect(x,height-i*wallSectionBuffer,20,wallSectionHeight).attr({"fill" : "#ddd"}));
        }
    };

    this.loadImages = function() {
        var createImage = function (sPartialFN, aoCards) {
            var fn = config.imagePath + "cards/" + sPartialFN + config.cards.filenameSuffix;
            aoCards[0].imageRef = fn;
            aoCards[1].imageRef = fn;
        };

        for (var key in self.game.rulebase) {
            createImage(key, self.game.rulebase[key]);
        }
    };

};
